<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/node_modules/mditor/dist/css/mditor.min.css">
  <script src="/node_modules/mditor/dist/js/mditor.min.js"></script>
</head>
<body>

  <div class="container-fluid">
  <h1>发表文章页</h1>
  <hr>

  <form id="form">
    <div class="form-group">
      <label for="">文章标题：</label>
      <input type="text" name="title" id="title" class="form-control" required maxlength="30" value="<%= article.title %>">
    </div>

    <div class="form-group">
      <label for="">文章内容：</label>
      <!--mditor  -->
      <textarea name="content" id="editor" class="form-control"><%= article.content %></textarea>
    </div>

    <div class="form-group clearfix">
      <input type="submit" value="发表文章" class="btn btn-primary pull-right">
    </div>
  </form>
</div>
<script>
$(function() {
  let mditor =  Mditor.fromTextarea(document.getElementById('editor'));
  $('#form').on('submit', function(e) {
    e.preventDefault()
    $.ajax({
      type: "POST",
      url: "/article/edit",
      data: {
        title: $('#title').val(),
        // mditor.value是获取富文本编辑器中输入的值用的
        content: mditor.value,
        userId: '<%= user.id%>',
        id: '<%= article.id%>'
      },
      dataType: "json",
      success: function (res) {
        // 如果成功，跳转到文章详情页/article/detail?id = xxx
        if (res.status === 1) {
          location.href=`/article/detail?id=${res.articleId}`
        } else {
          alert(res.msg)
        }
      }
    });
  })
})
</script>
</body>

</html>